(function () {
  // 显示隐藏侧边栏
  const elevator = document.querySelector('.xtx-elevator');
  const backTop = document.querySelector('#backTop');
  window.addEventListener('scroll', function () {
    const n = document.documentElement.scrollTop;
    elevator.style.opacity = n >= 300 ? 1 : 0;
  });
  // 返回顶部
  backTop.addEventListener('click', function () {
    window.scrollTo(0, 0);
  });
})();
(function () {
  const list = document.querySelector('.xtx-elevator-list');
  const news = document.querySelector('.xtx_goods_new');
  const popular = document.querySelector('.xtx_goods_popular');
  const brand = document.querySelector('.xtx_goods_brand');
  const topic = document.querySelector('.xtx_goods_topic');
 // 点击事件 事件委托
  list.addEventListener('click', function (e) {
    if (e.target.tagName === 'A' && e.target.dataset.name) {
      const n = e.target.dataset.name;
      switch (n) {
        case 'news':
          window.scrollTo(0, news.offsetTop);
          break;
        case 'popular':
          window.scrollTo(0, popular.offsetTop);
          break;
        case 'brand':
          window.scrollTo(0, brand.offsetTop);
          break;
        case 'topic':
          window.scrollTo(0, topic.offsetTop);
          break;
        default:
          alert('出问题了');
          break;
      }
    }
  });
  // 页面滚动 通过list获取a
  window.addEventListener('scroll', function () {
    const n = document.documentElement.scrollTop;
    // console.log(list.querySelector('a.active'));// null
    list.querySelector('a.active') &&
      list.querySelector('a.active').classList.remove('active');
    if (n >= news.offsetTop && n < popular.offsetTop) {
      list.querySelector('a[data-name="news"]').classList.add('active');
    } else if (n >= popular.offsetTop && n < brand.offsetTop) {
      list.querySelector('a[data-name="popular"]').classList.add('active');
    } else if (n >= brand.offsetTop && n < topic.offsetTop) {
      list.querySelector('a[data-name="brand"]').classList.add('active');
    } else if (n >= topic.offsetTop) {
      list.querySelector('a[data-name="topic"]').classList.add('active');
    }
  });
})();
